<template>
  <view class="detail">
    <!-- 顶部返回栏 -->
    <view class="nav-bar">
      <text class="back" @click="goBack">＜</text>
      <text class="title">人员详情页面</text>
      <view class="nav-placeholder"></view>
    </view>
    <!-- 头部信息 -->
    <view class="header">
      <image :src="tutor.avatar || defaultAvatar" class="avatar" />
      <view class="header-info">
        <view class="name-row">
          <text class="name">{{ tutor.name }}</text>
          <text class="degree">{{ tutor.degree }}</text>
          <text v-if="tutor.verified" class="verified">已实名认证</text>
        </view>
        <view class="school">{{ tutor.school }} | {{ tutor.major }}</view>
        <view class="meta">
          <text>学员评分：{{ tutor.rating || 0 }}分</text>
          <text class="divider">|</text>
          <text>辅导人数：{{ tutor.orders || 0 }}人</text>
        </view>
      </view>
    </view>
    <!-- 自述 -->
    <view class="section-title">自述</view>
    <view class="section-content">{{ tutor.desc }}</view>
    <!-- 科研经历 -->
    <view class="section-title">科研经历</view>
    <view class="section-content">{{ tutor.experience || '暂无科研经历' }}</view>
    <!-- 可辅导 -->
    <view class="section-title">可辅导</view>
    <view class="tags">
      <button v-for="item in tutor.canHelp" :key="item" size="mini" class="tag-btn">{{ item }}</button>
    </view>
    <!-- 用户评价 -->
    <view class="section-title">用户评价：</view>
    <view v-if="tutor.reviews && tutor.reviews.length" class="reviews">
      <view v-for="(review, idx) in tutor.reviews" :key="idx" class="review">
        <image :src="review.avatar || defaultAvatar" class="review-avatar" />
        <view class="review-info">
          <view class="review-header">
            <text class="review-name">{{ review.name }}</text>
            <text class="review-type">{{ review.type }}</text>
            <text class="review-score">{{ review.score }}分</text>
            <text class="review-date">{{ review.date }}</text>
          </view>
          <view class="review-content">{{ review.content }}</view>
        </view>
      </view>
    </view>
    <view v-else class="no-review">暂无用户评价</view>
    <!-- 底部绿色按钮 -->
    <button type="primary" class="contact-btn green" @click="copyWeixin">我要微信</button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useTutorStore } from '../../../store/tutor.js'

const tutorStore = useTutorStore()
const tutorId = ref('')
const defaultAvatar = '/static/logo.png'

// 使用computed获取当前导师信息
const tutor = computed(() => {
  if (tutorId.value) {
    return tutorStore.getTutorById(tutorId.value) || {}
  }
  return tutorStore.currentTutor || {}
})
const goBack = () => {
  uni.navigateBack()
}
const weixin = 'wx123'
function copyWeixin() {
  uni.setClipboardData({
    data: weixin,
    success: () => {
      uni.showToast({ title: '微信号已复制', icon: 'success' })
    }
  })
}
onLoad((options) => {
  if (options && options.tutorId) {
    tutorId.value = options.tutorId
  } else if (options && options.tutor) {
    // 兼容旧的传参方式
    const data = JSON.parse(decodeURIComponent(options.tutor))
    tutorStore.setCurrentTutor(data)
  }
})
</script>

<style scoped>
.detail {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}

.back {
  font-size: 40rpx;
  color: #333;
  padding: 0 16rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
  color: #333;
}

.nav-placeholder {
  width: 48rpx;
  height: 48rpx;
}

/* 头部信息 */
.header {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: #eee;
}

.header-info {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.degree {
  font-size: 26rpx;
  color: #888;
  margin-left: 8rpx;
}

.verified {
  background: #ffe0a3;
  color: #b97a00;
  font-size: 22rpx;
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  margin-left: 8rpx;
}

.school {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 12rpx;
}

.meta {
  color: #999;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.divider {
  margin: 0 8rpx;
}

/* 内容区域 */
.section-title {
  font-weight: bold;
  font-size: 30rpx;
  margin: 32rpx 24rpx 16rpx 24rpx;
  border-left: 6rpx solid #1e98d7;
  padding-left: 16rpx;
  color: #333;
}

.section-content {
  font-size: 28rpx;
  color: #444;
  background: #fff;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  line-height: 1.5;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  background: #fff;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.tag-btn {
  background: #e3f2fd;
  color: #1976d2;
  border: none;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

/* 评价区域 */
.reviews {
  background: #fff;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.review {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 20rpx;
}

.review:last-child {
  margin-bottom: 0;
}

.review-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  background: #eee;
}

.review-info {
  flex: 1;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.review-name {
  font-weight: bold;
  color: #333;
}

.review-type {
  color: #1976d2;
}

.review-score {
  color: #ff9800;
}

.review-date {
  color: #bbb;
  font-size: 22rpx;
}

.review-content {
  color: #444;
  font-size: 26rpx;
  line-height: 1.4;
}

.no-review {
  color: #bbb;
  font-size: 28rpx;
  text-align: center;
  margin: 40rpx 0;
}

/* 联系按钮 */
.contact-btn {
  width: calc(100% - 48rpx);
  margin: 32rpx 24rpx 40rpx 24rpx;
  font-size: 32rpx;
  height: 96rpx;
  border-radius: 12rpx;
  background: #1aad19;
  color: #fff;
  border: none;
  font-weight: bold;
}
</style>